<script lang="ts">
export default { name: 'FormSysField' }
</script>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { getModelData, mergeModelFields } from '@/utils/cmscommon'
import * as ModelApi from '@/api/cms/model'
const props = defineProps({
  modelValue: { type: Boolean, required: true },
  beanId: { type: Number, default: null }
})
const emit = defineEmits({ 'update:modelValue': null })
const { beanId, modelValue: visible } = toRefs(props)
const { t } = useI18n()
const bean = ref<any>({})
const buttonLoading = ref<boolean>(false)
const mainFields = ref<any[]>([])
const rightFields = ref<any[]>([])
const modelTypeStr = computed(() => {
  if (bean.value.modelType == 2) {
    return 'content'
  }
  return 'channel'
})
watch(visible, async () => {
  if (visible.value && beanId.value) {
    bean.value = await ModelApi.getModelApi(beanId.value as number)
    const modelData = getModelData()[modelTypeStr.value]

    mainFields.value = mergeModelFields(
      modelData.mainFields,
      bean.value.mainFields,
      modelTypeStr.value
    )

    if (modelData.rightFields?.length > 0) {
      rightFields.value = mergeModelFields(
        modelData.rightFields,
        bean.value.rightFields,
        modelTypeStr.value
      )
    }
  }
})
const handleSubmit = async () => {
  buttonLoading.value = true
  try {
    await ModelApi.updateModelApi({
      ...bean.value,
      mainFields: JSON.stringify(mainFields.value),
      rightFields: JSON.stringify(rightFields.value)
    })
    ElMessage.success(t('common.success'))
  } finally {
    buttonLoading.value = false
    emit('update:modelValue', false)
  }
}
const handleReset = () => {
  const modelData = getModelData()[modelTypeStr.value]
  mainFields.value = mergeModelFields(modelData.mainFields, null, modelTypeStr.value)
  if (modelData.rightFields?.length > 0) {
    rightFields.value = mergeModelFields(modelData.rightFields, null, modelTypeStr.value)
  }
}
</script>

<template>
  <el-dialog
    :title="$t('cms.sysFieldDesign')"
    :model-value="modelValue"
    top="5vh"
    width="70%"
    @update:model-value="(event) => $emit('update:modelValue', event)"
  >
    <el-form>
      <el-table :data="mainFields" class="mt-5">
        <el-table-column prop="code" :label="$t('cms.model.field.code')" min-width="110" />
        <el-table-column prop="name" :label="$t('cms.model.field.name')" min-width="140">
          <template #default="{ row }">
            <el-input v-model="row.name" :placeholder="$t(row.label)" class="w-11/12"
          /></template>
        </el-table-column>
        <el-table-column prop="show" :label="$t('cms.model.field.show')">
          <template #default="{ row }"
            ><el-switch v-model="row.show" :disabled="row.must"
          /></template>
        </el-table-column>
        <el-table-column prop="required" :label="$t('cms.model.field.required')">
          <template #default="{ row }"
            ><el-switch v-model="row.required" :disabled="row.must"
          /></template>
        </el-table-column>
        <el-table-column prop="double" :label="$t('cms.model.field.double')">
          <template #default="{ row }"><el-switch v-model="row.double" /></template>
        </el-table-column>
        <el-table-column :label="$t('cms.model.field.attribute')" min-width="180">
          <template #default="{ row }">
            <template v-if="row.type === 'image'">
              <el-input v-model.number="row.imageHeight">
                <template #prepend>{{ $t('cms.model.field.imageHeight') }}</template>
              </el-input>
              <el-input v-model.number="row.imageWidth">
                <template #prepend>{{ $t('cms.model.field.imageWidth') }}</template>
              </el-input>
              <el-select
                v-model="row.imageMode"
                :placeholder="$t('cms.model.field.imageProcess')"
                class="w-full"
              >
                <el-option
                  v-for="n in ['manual', 'cut', 'resize', 'none']"
                  :key="n"
                  :value="n"
                  :label="$t(`cms.model.field.imageProcess.${n}`)"
                />
              </el-select>
            </template>
            <template v-else-if="row.type === 'imageList'">
              <el-input v-model.number="row.imageMaxHeight">
                <template #prepend>{{ $t('cms.model.field.imageMaxHeight') }}</template>
              </el-input>
              <el-input v-model.number="row.imageMaxWidth">
                <template #prepend>{{ $t('cms.model.field.imageMaxWidth') }}</template>
              </el-input>
              <el-select
                v-model="row.imageListType"
                :placeholder="$t('cms.model.field.imageListType.type')"
                class="w-full"
              >
                <el-option
                  v-for="n in ['pictureCard', 'picture']"
                  :key="n"
                  :value="n"
                  :label="$t(`cms.model.field.imageListType.${n}`)"
                />
              </el-select>
            </template>
            <template v-else-if="row.type === 'editor'">
              <el-select
                v-model="row.editorType"
                :placeholder="$t('cms.model.field.editorType.label')"
                class="w-full"
              >
                <el-option
                  v-for="n in [1,2,3]"
                  :key="n"
                  :value="n"
                  :label="$t(`cms.model.field.editorType.${n}`)"
                />
              </el-select>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-if="rightFields.length > 0" :data="rightFields" class="mt-4">
        <el-table-column prop="code" :label="$t('cms.model.field.code')" min-width="100" />
        <el-table-column prop="name" :label="$t('cms.model.field.name')" min-width="120">
          <template #default="{ row }"
            ><el-input v-model="row.name" :placeholder="$t(row.label)" class="w-11/12"
          /></template>
        </el-table-column>
        <el-table-column prop="show" :label="$t('cms.model.field.show')">
          <template #default="{ row }"
            ><el-switch v-model="row.show" :disabled="row.must"
          /></template>
        </el-table-column>
        <el-table-column prop="required" :label="$t('cms.model.field.required')">
          <template #default="{ row }"
            ><el-switch v-model="row.required" :disabled="row.must"
          /></template>
        </el-table-column>
      </el-table>
      <div class="mt-3">
        <el-button
          :loading="buttonLoading"
          type="primary"
          native-type="submit"
          @click.prevent="handleSubmit"
          >{{ $t('common.save') }}</el-button
        >
        <el-button @click="handleReset">{{ $t('cms.model.initDef') }}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
